<template>
  <div class="page-content">
    <KiTable  v-bind="tableConfig" 
              :tableData="tableData"
              :totalCount="totalCount"
              v-model:page="pageInfo" >
      <template #btn>
        <el-button 
          type="primary" 
          size="large"
          @click="handleCreateClick"
          v-if="tableName !== 'story'">新增</el-button>
      </template>
      <template #status="scope">
        <el-tag :type=" scope.item.enable ? 
                        scope.item.enable === 1 ? '':'danger': 
                        scope.item.status === 1 ? '':'danger'">
          {{scope.item.enable ? 
                        scope.item.enable === 1 ? '启用':'禁用': 
                        scope.item.status === 1 ? '启用':'禁用'}}
        </el-tag>
      </template>
      <template #imgUrl="scope">
        <el-image
          :src="scope.item.imgUrl"
          fit="cover"
          preview-teleported
          hide-on-click-modal
          :preview-src-list="[scope.item.imgUrl]"
        >
    </el-image>
      </template>
      <template #createAt="scope">
        {{timeFormat(scope.item.createAt)}}
      </template>
      <template #updateAt="scope">
        {{timeFormat(scope.item.updateAt)}} 
      </template>
      <template #operation="scope">
        <el-button @click="handleEditClick(scope.item)">编辑</el-button>
        <el-popconfirm
          title="您确认要删除吗？"
          @confirm="handleDeleteClick(scope.item)"
        >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>

      </template>
    </KiTable>

  </div>
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue';
import KiTable from '../ki-table/KiTable.vue';
import { useTableStore } from '@/store';
import {timeFormat} from '@/utils/format'
import {ListName} from '@/store/table/type'
const props = defineProps({
  tableConfig:{
    type:Object,
    required:true
  },
  tableName:{
    type:String,
    required:true
  }
})
const tableStore = useTableStore()
const pageInfo = ref({
  currentPage: 1,
  pageSize: 10
})
const getTableData = (queryInfo:any = {}) => {  
  tableStore.getTableAction(props.tableName,{
    offset:(pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
    size:pageInfo.value.pageSize,
    ...queryInfo
  })
}
watchEffect(() => {
  getTableData()
})
const tableData = computed(() => {
  return tableStore.dataList(props.tableName as ListName)
})
const totalCount = computed(() => {
  return tableStore.dataCount(props.tableName as ListName)
})
const emits = defineEmits(['createClick','editeClick'])
const handleCreateClick = () => {
  emits('createClick')
}
const handleEditClick = (info:any) => {
  emits('editeClick',info)
}
const handleDeleteClick = (info:any) => {
  tableStore.removeTableAction(props.tableName,info.id)
}
defineExpose({
  getTableData
})
</script>

<style scoped>
.page-content{
  background-color: #fff;
  border-radius: 10px;
  margin-top:20px;
}
</style>